<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>查看演唱经历</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        .STYLE6 {
            color: #999999;
            font-size: 12px;
        }

        a.gray {
            color: #999999;
            text-decoration: none
        }

        a.gray:hover {
            color: #CCCCCC;
            text-decoration: none
        }

        select {
            width: 60px;
            /* 可根据需要调整宽度 */
            height: 30px;
            /* 可根据需要调整高度 */
        }
    </style>
</head>

<body>
    <table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" class="TitleColor">
        <tr>
            <td width="15%" valign="top" bgcolor="#E1E1E1">
                <div id='leftpage'></div>
            </td>
            <td width="85%">
                <table width="100%" border="0" cellpadding="1" cellspacing="0">
                    <tr>
                        <td>
                            <table align="center" border="0" cellspacing="0" cellpadding="1">

                                <tr>
                                    <td align="right">经历：</td>
                                </tr>
                                <tr>
                                    <td>
                                        <!-- 歌曲列表区域 -->
                                        <div id="songList"></div>
                                        <!-- 翻页按钮区域 -->
                                        <div id="pagination"></div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>

        <tr>
            <td bgcolor="#E1E1E1" align="center">
                <div id='totalpage'></div>
            </td>
            <td height="60" align="center">
                <div id='footerpage'></div>
            </td>
        </tr>

        </tr>
    </table>
</body>
<script>
    function loadScript(c, d) { var b = document.createElement("script"); b.type = "text/javascript"; var e = sessionStorage.getItem(c); e ? (b.textContent = e, d(b)) : fetch(c).then(function (a) { return a.text() }).then(function (a) { b.textContent = a; sessionStorage.setItem(c, a); d(b); location.reload() })["catch"](function (a) { console.error("Error loading the script:", a) }) };
    loadScript("tu_0.js", function (script) { document.head.appendChild(script); });
</script>
<script>
    if (sessionStorage.getItem("tu_0.js")) {		// 读取记忆是否已保存js文件
        loadHtml("left.htm", "leftpage");
        loadHtml("total.htm", "totalpage");
        loadHtml("footer.htm", "footerpage");
    }

    var first = 0;
    function fun() {
        if (first == 0) {
            first = 1;
            setTimeout(function () { myTimer("cookie") }, 0);		//自动发送post指,只有打开页面的时候，才发送一次
        } else {
        }
    }
    setInterval("fun()", 100);			// 周期性调用函数 每隔100毫秒调用一次	

    function myTimer(type) {
        var xhr = postPhp("index.php");
        xhr.onreadystatechange = function () {		//2.注册回调函数
            var array_name = txtUnzip(xhr);
            if (array_name != null) {
                if (type == "cookie") {
                    cookiemyFunction(array_name)		// 返回的信息在html页面显
                }
                if (type == "Cread") {
                    displaySongList(array_name);
                }
            }
        }

        if (type == "cookie") {
            txtZip(xhr, "t:ncki");
        }
        function displaySongList(songs) {
            const songListDiv = document.getElementById('songList');
            songListDiv.innerHTML = ''; // 清空现有内容
            
            // 创建表格来显示歌曲列表
            const table = document.createElement('table');
            table.style.width = '100%';
            
            // 添加表头
            const headerRow = document.createElement('tr');
            ['歌曲名称', '演唱时间', '地点'].forEach(text => {
                const th = document.createElement('th');
                th.textContent = text;
                headerRow.appendChild(th);
            });
            table.appendChild(headerRow);
            
            // 添加歌曲数据
            songs.forEach(song => {
                const row = document.createElement('tr');
                [song.name, song.date, song.location].forEach(text => {
                    const td = document.createElement('td');
                    td.textContent = text;
                    row.appendChild(td);
                });
                table.appendChild(row);
            });
            
            songListDiv.appendChild(table);
        }

        function createPagination(totalPages, currentPage) {
            const paginationDiv = document.getElementById('pagination');
            paginationDiv.innerHTML = '';
            
            // 创建分页按钮
            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.textContent = i;
                button.style.margin = '0 5px';
                if (i === currentPage) {
                    button.disabled = true;
                } else {
                    button.onclick = () => loadPage(i);
                }
                paginationDiv.appendChild(button);
            }
        }

        function loadPage(pageNumber) {
            // 修改myTimer调用以加载指定页面的数据
            myTimer("Cread", pageNumber);
        }

        // 修改myTimer函数以支持分页
        function myTimer(type, page = 1) {
            var auxa = txtB64Enc("");
            txtZip(xhr, "t:dnlt&optt:" + optt + "&kcid:" + kcid + "&fida:" + fida + "&aux1:" + aux1 + "&aux2:" + aux2 + "&auxa:" + auxa);    
        }
    }

</script>

</html>